<template>
  <div class="purchase-order table-theme">
    <head-title title="库存--发货管理"></head-title>
    <el-card>
      <div class="data-filtering-view" style="margin-top: 0;">
        <div class="data-filtering-left">
          <el-date-picker v-model="date" type="daterange" size="normal" placeholder="选择日期时间" value-format="yyyy-MM-dd"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 300px;"
            @change="init(1)"></el-date-picker>
          <el-select v-model="type" placeholder="请选择" @change="init(1)" style="margin-left: 15px;">
            <el-option label="今日应发" :value="1"></el-option>
            <el-option label="已通知发货" :value="2"></el-option>
            <el-option label="逾期未发" :value="3"></el-option>
          </el-select>
        </div>
        <div class="data-filtering-right">
          <search-view :option="searchOption" @value="goSearch" @clear="refreshPage"></search-view>
          <refresh-button @refresh="refreshPage"></refresh-button>
        </div>
      </div>
      <el-table :data="list" stripe style="margin-top: 20px">
        <el-table-column label="序号" align="center" prop="rec_sn" width="100"></el-table-column>
        <el-table-column label="工厂编号" align="center" width="130" prop="factory_sn"></el-table-column>
        <el-table-column label="工厂名称" align="center" width="130" prop="factory_name"></el-table-column>
        <el-table-column label="订单编号" align="center" width="130" prop="order_sn"></el-table-column>
        <el-table-column label="收货人" align="center" prop="accept_name"></el-table-column>
        <el-table-column label="收货电话" width="120" align="center" prop="mobile_phone"></el-table-column>
        <el-table-column label="商品编号" align="center" width="120" prop="goods_sn"></el-table-column>
        <el-table-column label="主图" align="center" width="80">
          <template slot-scope="scope">
            <el-image :src="scope.row.img" style="width: 50px; height: 50px"></el-image>
          </template>
        </el-table-column>
        <el-table-column label="颜色" align="center" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.color }}
          </template>
        </el-table-column>
        <el-table-column label="材质" align="center" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.lining }}
          </template>
        </el-table-column>
        <el-table-column label="尺寸" align="center" min-width="120">
          <template slot-scope="scope">
            {{ scope.row.size }}
          </template>
        </el-table-column>
        <el-table-column label="通知发货时间" align="center" width="165" prop="notice_time"></el-table-column>
        <el-table-column label="实际发货时间" align="center" width="165" prop="logistics_time"></el-table-column>
        <el-table-column label="发货状态" align="center" width="100" prop="status_name"></el-table-column>
        <el-table-column label="物流单" align="center" min-width="350">
          <template slot-scope="scope">
            <template v-if="scope.row.logistics_img && scope.row.logistics_img.length">
              <el-image :src="data" v-for="(data, index) in scope.row.logistics_img.split(',')" :key="index"
                style="width: 60px; height: 60px; margin: 0 5px;"
                :preview-src-list="scope.row.logistics_img.split(',')"></el-image>
            </template>
          </template>
        </el-table-column>
      </el-table>
      <div class="pages">
        <el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init()"
          :current-page.sync="page"></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchOption: [
        {
          value: 0,
          label: "工厂名称",
          key: 'factory_name',
        },
        {
          value: 1,
          label: "工厂编号",
          key: 'factory_sn',
        },
        {
          value: 2,
          label: "订单编号",
          key: 'order_sn',
        },
        {
          value: 3,
          label: "收货人",
          key: 'accept_name',
        },
        {
          value: 4,
          label: "收货电话",
          key: 'mobile_phone',
        },
      ],
      min_stock: '',
      max_stock: '',
      searchType: "",
      searchContent: "",
      page: 1,
      total: 0,
      list: [],
      date: [],
      type: 1,
    };
  },
  watch: {
    showDialog(n, o) {
      if (!n) {
        this.storageForm = this.$options.data().storageForm
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init(type) {
      if (type) {
        this.page = 1
      }
      let data = {
        page: this.page - 1,
        type: this.type,
      }
      if (this.date && this.date.length) {
        data.start_time = this.date[0]
        data.end_time = this.date[1]
      }
      if (this.searchType !== '') {
        data[this.searchOption[this.searchType].key] = this.searchContent
      }
      this.$http(this.$ApiList.DeliveryManage, data).then(res => {
        if (res.code == 200) {
          this.list = res.datas.data
          this.total = res.datas.count
        }
      })
    },
    goSearch(searchType, searchContent) {
      this.searchType = searchType;
      this.searchContent = searchContent;
      this.page = 1;
      this.init();
    },
    // 刷新
    refreshPage() {
      this.searchType = 0;
      this.searchContent = "";
      this.init(1);
    },
    applyStorage(row) {
      this.stockInfo = row
      this.storageForm.stock_id = row.stock_id
      this.showDialog = true
    },
    upload(params) {
      if (this.storageForm.voucher_img.length >= 5) {
        return this.$layer.msg(`最多上传5张`);
      }
      const file = params.file,
        isJPGPNG = file.type === 'image/jpeg' || file.type === 'image/png',
        isLt3MB = file.size / 1024 <= 3024;
      if (!isJPGPNG) {
        this.$layer.msg('只能上传图片格式png、jpg!');
        return;
      }
      if (!isLt3MB) {
        this.$layer.msg('图片不能大于3M');
        return;
      }
      let img = new FormData();
      img.append('file[]', file);
      this.$http(this.$ApiList.publicUpload, img).then(res => {
        if (this.storageForm.voucher_img.length >= 5) return
        this.storageForm.voucher_img.push(res.datas[0])
      });
    },
    delVoucher(index) {
      this.storageForm.voucher_img.splice(index, 1)
    },
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let data = {}
          for (let i in this.storageForm) {
            if (i !== 'voucher_img') {
              data[i] = this.storageForm[i]
            } else {
              data[i] = this.storageForm[i].join(',')
            }
          }
          this.$http(this.$ApiList.StockCheck, data).then(res => {
            this.$layer.msg('提交成功');
            this.showDialog = false
            this.init()
          })
        } else {
          this.$layer.msg('请填写完整信息后提交');
        }
      });
    },
  },
};
</script>

<style lang="scss">
.vl-notify {
  z-index: 10000;
}
</style>
<style lang="scss" scoped>
.order_list_head {
  display: flex;
}

.type-view {
  display: flex;
  flex: 1;
  min-width: 0;
}

.type-view .client-item {
  margin-right: 40px;
  line-height: 40px;
  color: rgba(153, 153, 153, 1);
  cursor: pointer;
}

.client-item-active {
  color: #333333 !important;
  border-bottom: 4px solid #34a1e0;
}

.data-filtering-view {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .data-filtering-left {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;

    .select-view {
      margin-left: 10px;
    }
  }

  .data-filtering-right {
    display: flex;
    align-items: center;
  }
}

.storage-info {
  line-height: 30px;
  margin-bottom: 15px;
  font-size: 12px;

  p {
    color: #333;
    font-weight: bold;

    span {
      font-weight: normal;
      color: #888;
    }
  }
}

.upload-box {
  // padding-left: 40px;

  .goods-img-upload {
    display: flex;

    .goods-img-upload-imgs {
      flex: 1;
      align-items: flex-start;

      .el-image {
        width: 140px;
        height: 140px;
        border: solid 1px #e5e5e5;
        margin-left: 25px;
        vertical-align: top;
      }
    }

    .goods-img-upload-imgs-info {
      width: 100%;
      max-width: 660px;
      border: solid 1px #e5e5e5;
      margin-left: 25px;
      min-height: 390px;

      .goods-img-upload-imgs-info-box {
        position: relative;

        .el-icon-error {
          position: absolute;
          font-size: 20px;
          color: #ef3030;
          right: 5px;
          top: 5px;
          z-index: 1;
          background-color: #fff;
          border-radius: 50%;
          cursor: pointer;
        }
      }

      .el-image {
        width: 100%;
        vertical-align: top;
      }
    }

    .vice_big_box {
      position: relative;
      display: inline-block;
      vertical-align: top;
      margin-bottom: 20px;

      .el-icon-error {
        position: absolute;
        font-size: 20px;
        color: #ef3030;
        right: 5px;
        top: 5px;
        z-index: 1;
        background-color: #fff;
        border-radius: 50%;
        cursor: pointer;
      }
    }
  }
}
</style>